<template>
  <div>
    <div class="i-layout-page-header">
      <div>
        <el-tabs v-model="status_str" @click="onChangeTab">
          <el-tab-pane
            v-for="(item , index) in tabs"
            :label="item.tit"
            :name="item.name"
            :key="index"
          />
        </el-tabs>
      </div>
    </div>
    <template v-if="status_str == '1'">
      <el-card :bordered="false" dis-hover class="ivu-mt" v-loading="loading">
        <el-form
          ref="artFrom"
          :model="questionFrom"
          label-width="75px"
          label-position="right"
          @submit.native.prevent
          inline
        >
          <el-form-item label="搜索：" label-for="title">
            <el-input placeholder="请输入服务名称" v-model="questionFrom.title"  class="form_content_width">
              <el-button slot="append" @click="examSearchs" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>

          <el-form-item label="服务分类：" label-for="cityId">
            <!-- <el-select
              v-model="questionFrom.cateId"
              placeholder="请选择"
              element-id="type"
              clearable
              filterable
              @change="selectType"
              style="width: 180px"
            >
              <el-option value="all" label="全部"></el-option>
              <el-option
                :disabled="item.pid==0"
                :value="item.id"
                v-for="(item,index) in cateList"
                :key="index"
                :label="item.title"
              ></el-option>
            </el-select> -->
            <el-cascader
              v-model="cateId"
              :options="cateList"
              :props="{
                value:'id',
                label:'title'
              }"
              :clearable="true"
              class="form_content_width"
              @change="selectCategory"></el-cascader>
          </el-form-item>

          <el-form-item label="服务类型：" label-for="itemType">
            <el-select
              v-model="questionFrom.itemType"
              placeholder="请选择"
              element-id="type"
              filterable
              @change="selectType"
              class="form_content_width"
            >
              <el-option value="all" label="全部"></el-option>
              <el-option :value="1" label="普通服务"></el-option>
              <el-option :value="2" label="次卡服务"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态" label-for="status">
            <el-select
              v-model="questionFrom.status"
              placeholder="请选择"
              element-id="type"
              filterable
              @change="selectType"
              class="form_content_width"
            >
              <el-option value="all" label="全部"></el-option>
              <el-option :value="0" label="已下架"></el-option>
              <el-option :value="1" label="上架中"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-row type="flex">
          <el-col v-bind="grid">
            <router-link :to="'/onsite/add_item'">
              <el-button type="primary" class="bnt" icon="md-add">添加服务项</el-button>
            </router-link>
          </el-col>
        </el-row>
        <el-table
          :data="ItemList"
          ref="table"
          class="mt25"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <el-table-column label="Id" fixed="left" min-width="100">
            <template slot-scope="scope">{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column label="服务名称" min-width="150">
            <template slot-scope="scope">{{scope.row.title}}</template>
          </el-table-column>
          <el-table-column label="封面图片" min-width="150">
            <template slot-scope="{ row, index }">
              <div class="tabBox_img" v-if="row.thumb.length > 0">
                <img v-lazy="row.thumb" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="简介" min-width="200">
            <template slot-scope="scope">{{scope.row.shortTitle}}</template>
          </el-table-column>
          <el-table-column label="分类" min-width="100" align="center">
            <template slot-scope="scope">{{scope.row.cateName}}</template>
          </el-table-column>
          <el-table-column label="类型" min-width="100" align="center">
            <template slot-scope="scope">{{scope.row.itemType == 1 ? '普通服务' : '次卡服务'}}</template>
          </el-table-column>
          <el-table-column label="价格" min-width="150">
            <template slot-scope="scope">{{scope.row.price}}</template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.status"
                :value="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="onchangeStatus(row)"
                size="large"
                active-text="上架"
                inactive-text="下架"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否热门">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.hotSales"
                :value="row.hotSales"
                :active-value="1"
                :inactive-value="0"
                @change="onChangeHot(row)"
                size="large"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否推荐">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.isRecommend"
                :value="row.isRecommend"
                :active-value="1"
                :inactive-value="0"
                @change="onchangeRecommend(row)"
                size="large"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="180" sortable>
            <template slot-scope="scope">{{scope.row.addTimeStr}}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="120">
            <template slot-scope="{ row, index }">
              <a @click="edit(row)">修改</a>
              <el-divider direction="vertical" />
              <a @click="del(row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            :current-page="questionFrom.page"
            show-elevator
            show-total
            @current-change="pageChange"
            :page-size="questionFrom.limit"
          />
        </div>
      </el-card>
    </template>
    <template v-if="status_str == '2'">
      <companyServices ref="company_services"></companyServices>
    </template>
  </div>
</template>
  
  <script>
import companyServices from './companyServices.vue';
import { getItemListApi, getServiceCateListApi, ItemIsRecomApi, ItemStatusApi, itemDelApi ,itemSetHotApi} from '@/api/onsite';
export default {
  name: 'onsite_index',
  components: {
    companyServices,
  },
  data() {
    return {
      modals: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      status_str: '1',
      tabs: [
        { tit: '平台服务项目', name: '1' },
        { tit: '门店服务项目', name: '2' },
      ],
      questionFrom: {
        itemType: 'all',
        status: 'all',
        title: '',
        page: 1,
        limit: 10,
        type: '0',
        cateId:'all'
      },
      cateId:[],
      ItemList: [],
      cateList: [],
      itemSpecData: {},
      loading: false,
      total: 0,
      item_id: 0,
    };
  },
  created() {
    // this.questionFrom.cityId = this.$route.query.id ? this.$route.query.id : 0;
    this.getCategory();
    this.getList();
  },
  activated() {
    // this.questionFrom.cityId = this.$route.query.id ? this.$route.query.id : 0;
    this.getCategory();
    this.getList();
  },
  mounted() {},
  methods: {
    onChangeTab(name) {
      this.status_str = name;
      if (this.status_str == '1') {
        this.getList();
      }
    },
    getList() {
      //   this.loading = true;
      getItemListApi(this.questionFrom)
        .then(async (res) => {
          let data = res;
          let list = res.list;
          let count = res.total;
          this.total = count;
          this.ItemList = list;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    getCategory() {
      getServiceCateListApi({limit:9999}).then(async (res) => {
        this.cateList = res.list;
      });
    },
    pageChange(index) {
      console.log(index)
      this.questionFrom.page = index;
      this.getList();
    },
    selectCategory(e) {
      if(!e){
        this.questionFrom.cateId = 'all';
      }else{
        this.questionFrom.cateId = e[1]
      }
      this.questionFrom.page = 1;
      this.getList();
    },
    selectType(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    examSearchs(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    onchangeStatus(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      console.log(row,'row')

      this.loading = true;
      ItemStatusApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;

          this.$message.error(res.msg);
        });
    },
    onChangeHot(row){
      let data = {
        id:row.id,
        hotSales:row.hotSales
      }
      itemSetHotApi(data).then(res => {
        this.$message.success('操作成功')
      })
    },
    onchangeRecommend(row) {
      let data = {
        id: row.id,
        isRecommend: row.isRecommend,
      };
      ItemIsRecomApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    // 编辑
    edit(row) {
      this.$router.push({
        path: '/onsite/add_item',
        query: {
          id: row.id,
        },
      });
    },
    // 规格
    ItemSpec(row) {
      this.modals = true;
      this.item_id = row.id;
    },
    // 删除
    del(row) {
      this.$modalSure(`删除【${row.title}】`).then(() => {
        itemDelApi(row.id).then((res) => {
          this.$message.success('删除成功');
          this.getList();
        });
      });
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .form_content_width{
    width: 180px !important
  }
  .treeSel >>>.ivu-select-dropdown-list {
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
  